<script setup>
import { ref, defineProps } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import uploadBtn from './uploadBtn.vue'
const props = defineProps({
	followVisible: Boolean
})
const emits = defineEmits(['changeFollowVisible'])
const scoreForm = ref({
	type: '增加',
	num: 1,
	content: ''
})
const isShow = ref(false)
</script>
<template>
	<el-dialog v-model="props.followVisible" width="671px" @close="emits('changeFollowVisible', false)">
		<template #header>
			<h2 class="dialog-title">添加跟进</h2>
		</template>
		<div class="score-box">
			<el-scrollbar max-height="800px">
				<div class="part">
					<p class="full-w name">跟进记录</p>
					<div class="row">
						<div class="mark-title">内容：</div>
						<el-input
							style="margin-top: 8px"
							v-model="scoreForm.content"
							maxlength="500"
							placeholder="请输入跟进内容"
							show-word-limit
							type="textarea"
							:autosize="{
								minRows: 8
							}"
							resize="none"
						/>
					</div>
				</div>
				<div class="file-uploader-box" style="padding-left: 64px; width: 240px">
					<el-tooltip placement="top" effect="light">
						<template #content>
							图片附件最大尺寸2M PDF附件最大尺寸20M <br />
							视频附件最大尺寸10M <br />表格(.xlsx)附件最大尺寸40M <br />文档(.word)附件最大尺寸40M
						</template>
						<uploadBtn :classifier="'link'" />
					</el-tooltip>
				</div>
				<div class="part">
					<p class="full-w name">关联</p>
					<div class="mark">
						<div class="mark-title">商机：</div>
						<el-button :icon="Plus">添加</el-button>
					</div>
					<div class="mark">
						<div class="mark-title">联系人：</div>
						<el-button :icon="Plus">添加</el-button>
					</div>
					<div class="mark">
						<div class="mark-title">企业：</div>
						<el-button :icon="Plus">添加</el-button>
					</div>
					<div class="mark">
						<div class="mark-title">群聊：</div>
						<el-button :icon="Plus">添加群聊</el-button>
					</div>
				</div>
			</el-scrollbar>
		</div>

		<template #footer>
			<span class="dialog-footer">
				<el-button class="mergr-btn" @click="emits('changeFollowVisible', false)">取消</el-button>
				<el-button class="mergr-btn" type="primary" @click="emits('changeFollowVisible', false)"> 保存 </el-button>
			</span>
		</template>
	</el-dialog>
</template>
<style lang="scss" scoped>
:deep(.el-textarea__inner) {
	background-color: #fafafa;
}
.mergr-btn {
	width: 74px;
	height: 32px;
	border-radius: 2px;
}

.score-box {
	width: 100%;
	.part {
		.name {
			color: rgba(0, 0, 0, 0.85);
			font-size: 14px;
			font-weight: 700;
			padding-bottom: 12px;
			border-bottom: 1px solid #e8e8e8;
			position: relative;
			margin-bottom: 16px;
			padding-left: 8px;
		}
		.name:before {
			position: absolute;
			content: '';
			display: block;
			width: 3px;
			height: 12px;
			background: #1890ff;
			left: 0;
			top: 5px;
			z-index: 1;
		}
		.mark {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-left: 24px;
			margin-bottom: 24px;
			.mark-title {
				min-width: 56px;
				text-align: right;
			}
		}
		.row {
			display: flex;
			justify-content: flex-start;
			padding-left: 24px;

			.mark-title {
				position: relative;
				top: 13px;
				min-width: 56px;
				text-align: right;
				position: relative;
				min-width: 56px;
				text-align: right;
			}
		}
	}
}

.dialog-title {
	width: 100%;
	color: #262626;
	font-size: 17px;
	text-align: center;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 1px;
}
</style>
